<template>
    <div id="rose-pie" ref="canvas" class="canvas" :style="{width: '100%', height: canHeight + 'px'}"></div>
</template>
<script setup lang="ts">
import { defineProps, computed, onMounted } from 'vue'
// import { createPinia } from 'pinia'
import * as echarts from 'echarts/core';
import {
  ToolboxComponent,
  type ToolboxComponentOption,
  LegendComponent,
  type LegendComponentOption,
  TooltipComponent,
  type TooltipComponentOption,
} from 'echarts/components';
import { PieChart, type PieSeriesOption } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
// import { useChartsStore } from '@/stores/charts';
// const pinia = createPinia();
// const chartStore = useChartsStore(pinia)
echarts.use([
  ToolboxComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout,
  TooltipComponent
]);

type EChartsOption = echarts.ComposeOption<
  ToolboxComponentOption | LegendComponentOption | PieSeriesOption | TooltipComponentOption
>;
const props = defineProps({
    canvasHeight: {
        type:Number,
        default: 300
    },
    data: {
        type: Object,
        default: () => { } 
    }
})
let canHeight = computed(() => { return props.canvasHeight })
onMounted(() => {
    var chartDom = document.getElementById('rose-pie')!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {
        legend: {
            show: true,
            textStyle: { color: '#11cb92' },
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        toolbox: {
            show: false,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        grid: {
            top: 0,
            left: '4%',
            right: 100,
            bottom: 20,
            containLabel: true
        },
        series: [
            {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [20, 100],
            center: ['45%', '50%'],
            roseType: 'area',
            itemStyle: {
                borderRadius: 8
            },
            data: props.data.seriesDataList
            }
        ]
    };

    option && myChart.setOption(option);
})
</script>

<style scope>
</style>